<template>
    <!--判断是否增加还是修改-->
    <el-dialog
      :title="!dataForm.id ? '新增' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="visible"
      @closed="dialogClose"
    >
      <!--创建表单-->
      <el-form :model="dataForm" ref="vForm" :rules="rules" label-position="left" label-width="150px"
    size="medium" @submit.native.prevent>
    <div class="tab-container">
      <el-tabs v-model="tab60554ActiveTab" type="border-card">
        <el-tab-pane name="tab1" label="必填信息">
          <el-form-item label="姓名" prop="name" class="required">
            <el-input v-model="dataForm.name" type="text" clearable></el-input>
          </el-form-item>
          <el-form-item label="身份证" prop="card_id" class="required">
            <el-input v-model="dataForm.card_id" type="text" clearable></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address" class="required">
            <el-input v-model="dataForm.address" type="text" clearable></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane name="tab-pane-48281" label="补充信息">
          <el-form-item label="input" prop="input116594">
            <el-input v-model="dataForm.input116594" type="text" clearable></el-input>
          </el-form-item>
          <el-form-item label="input" prop="input57665">
            <el-input v-model="dataForm.input57665" type="text" clearable></el-input>
          </el-form-item>
          <el-form-item label="input" prop="input60920">
            <el-input v-model="dataForm.input60920" type="text" clearable></el-input>
          </el-form-item>
          <div class="static-content-item">
            <el-divider direction="horizontal"></el-divider>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-form>


      <!-- <el-form :model="dataForm"  ref="vForm"  label-position="left"  label-width="150px"  size="medium" >
        
        <div class="static-content-item" v-show="false">
          <el-divider direction="horizontal"></el-divider>
        </div>
  
        <div class="card-container">
           <el-card style="{width: 100% important}" shadow="never">
            <div slot="header" class="clear-fix">
               <span>必填信息</span>
               <i class="float-right el-icon-arrow-down"></i>
            </div>
  
            <el-row>
              <el-col :span="12" class="grid-cell">
              <el-form-item label="姓名" prop="name" class="label-right-align">
                <el-input v-model="dataForm.name" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="身份证" prop="card_id" class="label-right-align">
                <el-input v-model="dataForm.card_id" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row>
            <el-col :span="12" class="grid-cell text">
              <el-form-item label="地址" prop="address" class="label-right-align">
                <el-input v-model="dataForm.address" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="出生日期" prop="birthday" class="label-right-align">
                <el-date-picker v-model="dataForm.birthday" type="datetime" placeholder="选择日期时间">
                </el-date-picker>
                <el-input v-model="dataForm.birthday" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="手机号" prop="phone" class="label-right-align">
                <el-input v-model="dataForm.phone" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="QQ" prop="QQ_NUM" class="label-right-align">
                <el-input v-model="dataForm.QQ_NUM" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </div>
  
      分页下拉
      <div class="static-content-item" v-show="false">
        <el-divider direction="horizontal"></el-divider>
      </div>
      <div class="card-container">
        <el-card style="{width: 100% !important}" shadow="never">
          <div slot="header" class="clear-fix">
            <span>选填信息</span>
            <i class="float-right el-icon-arrow-down"></i>
          </div>
  
          <el-row>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="邮箱" prop="Email" class="label-right-align">
                <el-input type="text" v-model="dataForm.email" rows="3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="政治面貌" prop="party" class="label-right-align">
                <el-input type="text" v-model="dataForm.party" rows="3"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="电话" prop="tel" class="label-right-align">
                <el-input type="text" v-model="dataForm.tel" rows="3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="邮政编码" prop="post_code" class="label-right-align">
                <el-input type="text" v-model="dataForm.post_code" rows="3"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="民族" prop="race" class="label-right-align">
                <el-input type="text" v-model="dataForm.race" rows="3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="学历" prop="education" class="label-right-align">
                <el-input type="text" v-model="dataForm.education" rows="3"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="专业" prop="speciality" class="label-right-align">
                <el-input type="text" v-model="dataForm.speciality" rows="3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="爱好" prop="hobby" class="label-right-align">
                <el-input type="text" v-model="dataForm.hobby" rows="3"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row>
              性别：<el-select v-model="dataForm.sex" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择">
                      <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                   </el-select>
          </el-row>
  
          <el-row>
              部门：<el-select v-model="dataForm.dept_id"  style="margin-left:20%;" placeholder="请选择">
                      <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value" />
                   </el-select>
          </el-row>
  
          <el-row>
              职位：<el-select v-model="dataForm.job_id" multiple collapse-tags style="margin-left:20%;" placeholder="请选择">
                      <el-option v-for="item in option3" :key="item.value" :label="item.label" :value="item.value" />
                   </el-select>
          </el-row>
        </el-card>
       </div>
      </el-form> -->
    
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  
  
  
  </template>
  
  <script>
  //impo是引入对象
  import qs from "qs";
  
  export default {
    data() {
      return {
        visible: false,
        dataForm: {
          name: "",tel:"",QQ_NUM:"",email:"",
          phone: "",birthday:"",race:"",speciality:"",hobby:"",
          education:"",card_id:"",address:"",post_code:"",
          sex:[],dept_id:[],job_id:[],
          id: 0,
        },
        //性别
        options1:[{value:'选项1',label:'男'},
                 {value:'选项2',label:'女'}, 
                ],
        
        //部门
        option2:[{value:"1",label:"技术部"},
                   {value:"2",label:"运营部"},
                   {value:"3",label:"财务部"},
                   {value:"4",label:"总公办"},
                   {value:"5",label:"市场部"},
                   {value:"6",label:"教学部"}],
  
        //职位
        option3:[{lable:"1",value:"职员"},
                   {lable:"2",value:"Java中级开发工程师"},
                   {lable:"3",value:"Java高级开发工程师"},
                   {lable:"4",value:"系统管理员"},
                   {lable:"5",value:"架构师"},
                   {lable:"6",value:"主管"},
                   {lable:"7",value:"经理"},
                   {lable:"8",value:"总经理"},
                   {lable:"9",value:"卫生员"},
        ]
  
  
  
      };
    },
  
    methods: {
      //对话框关闭
      dialogClose() {
        console.log("对话框关闭了");
      },
  
      //index.vue传进来的id
      //修改的用户信息要发请求
      init(id) {
        //如果用户的id传进来了，就是id，没有则为0
        this.dataForm.id = id || 0;
        this.visible = true; //显示对话框
        this.$nextTick(() => {
          //重置表单的所有字段
          //this.$refs["dataForm"].resetFields();
          //判断
          if (this.dataForm.id) {
            var $this = this;
            //发异步请求到后台获取这个用户数据
            this.$axios.get(`http://localhost:8080/hrm/findEmployeeById?id=`+ id)
              .then(function (response) {
                //判断状态是否为200
                if (response.data && response.data.code === 200) {
                  //修改前显示弹窗里面的值
                }
              });
          }
        });
      },
  
      dataFormSubmit() {
        this.$refs["vForm"].validate((valid) => {
          if (valid) {
            var $this = this;
            alert(this.dataForm.id);
            //没有表单的id是新增，有是修改
            
            const url =`http://localhost:8080/hrm/`+(!this.dataForm.id ? "addEmployee" : "updateUser");
            //异步请求  qs.stringify(this.dataForm):整个表单序列化（整个表单数据会组装成dataForm: {username:'张三',password:'123'...}
            this.$axios
              .post(url, qs.stringify(this.dataForm))
              .then(function (response) {
                //判断状态是否为200
                if (response.data.code === 200) {
                  $this.$message({
                    message: "操作成功",
                    type: "success",
                    duration: 1500,
                    //关闭弹窗
                    onClose: () => {
                      $this.visible = false;
                      //更新表中的内容
                      $this.$emit("refreshDataList");
                    },
                  });
                } else {
                  //不成功的提示
                }
              });
          } else {
          }
        });
      },
  
    },
  };
  </script>
  
  <style lang="scss" scoped>
    div.table-container {
      table.table-layout {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
      }
    }
    
    .label-left-align ::v-deep .el-form-item__label {
      text-align: left;
    }
    
    .label-center-align ::v-deep .el-form-item__label {
      text-align: center;
    }
    
    .label-left-align ::v-deep .el-form-item__label {
      text-align: left;
    }
  
    
    .static-content-item {
      min-height: 20px;
      display: flex;
      align-items: center;
  
      ::v-deep .el-divider--horizontal {
        margin: 0;
      }
    }
    
  </style>